<template>
	<view class="content">
		<view>
			<view class=" loan_container">
				<view class="clear border_bottom" style="padding: 20px 0px;">
					<view class="money-icon left black_font" style="font-size: 36px!important;width: 40px;">
						￥
					</view>
					<view class="left loan_input">
						<input type="number" style="font-size: 20px;color: #666666;" v-model="capital"  placeholder="请输入金额" placeholder-style="font-size:20px;color:#ccc"/>
					</view>
				</view>
				<view class="clear shenhe-text" >
					<text class="left">最多可贷（元） </text>
					<text class="right blue_text">{{info.use_capital}}</text>
				</view>
				<view class="clear shenhe-text" >
					<text class="left">利率</text>
					<text class="right blue_text">{{info.app_rate}}%</text>
				</view>
				<view class="clear shenhe-text" >
					<text class="left">利息（元） </text>
					<text class="right blue_text">{{lixi}}</text>
				</view>
			</view>
			<view class="hetong-back">
				<view class="clear shenhe-text" >
					<text class="left" style="font-size: 32rpx;color: #323232;">上传合同 </text>
				</view>
				<view class="clear hetong-list">
					<view class="left" v-for="(item,index) in hetong1" key="index" style="position: relative;">
						<icon type="clear" class="del_pic" size="15" @tap.stop="del_pic(1,item.url1,index)"></icon>
						<image :src="item.url" @tap="yulan(item.url)"></image>
					</view>
					<view class="left" @tap="uploadimg(4)" style="position: relative;">
						<image src="../../static/img/upload-icon.png" ></image>
					</view>
				</view>
			</view>
			<view style="height: 700rpx;"></view>
			
			<view class="hetong-back" style="position: fixed;bottom: 0px;left: 0px;">
				<view class="line_title" style="color: #666666;">本人已阅读并签署<text class="blue_text" @tap="goht_xieyi()">贷款服务相关合同</text>，同意报送贷款相关信息至金融信用信息基础数据库（人行征信系统）</view>
				<button class="big_button button_shadow" style="margin: 30rpx auto;" @tap="save()">
				    {{text_btn}}
				</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
		import {getlogin} from '@/static/js/login.js';
		import {fmoney} from '@/static/js/login.js';
		export default {
			data() {
				return {
					user:{},//用户登录信息
					nicheng:"",//昵称
					info:{},
					hetong:"",//合同的字符串
					capital:"",//贷款金额
					hetong1:[],//合同的数组
					id:"",
					text_btn:"确认贷款",
					lixi:0,
				}
			},
			watch:{
				// 监听下标的变化
				capital(val){
					if(val!=""){
						this.lixi=parseFloat(this.capital)*this.info.app_rate/100;
						this.lixi=Math.round(this.lixi*100)/100;
					}else{
						this.lixi=0
					}
					
				}
			},
			onLoad(option) {
	            this.user = getlogin();
				if(!this.user.islogin){
					uni.showModal({
					   showCancel:false,
					   content:"您还没有登录，请登录"
					})
					uni.navigateTo({
						url:"../public/login"
					})
				}	
				this.getinfo()
				this.id=option.id;
				if(this.id){
					this.text_btn="修改贷款"
					this.getdaikuandata();
				}
			},
			methods: {
				goht_xieyi(){
					uni.navigateTo({
						url:"../public/hetongxieyi"
					})
				},
				getdaikuandata(){
					uni.request({
						url: httpPath.filePath+'api.php/index/member/getLoanDetail/',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {member_id:this.user.member_id,id:this.id},
						success: (res) => {
							if(res.data.code=="200"){
								// this.info=res.data.result;	
								this.capital=res.data.result.capital;
								if(res.data.result.hetong.length!=0){
									for (var i = 0; i < res.data.result.hetong.length; i++) {
										this.hetong1.push({"url":httpPath.filePath+"/static/upload/image/"+res.data.result.hetong[i],"url1":res.data.result.hetong[i]});
									}
								}
							}   
						}
					});
				},
				getinfo(){//获取客户端首页信息
					uni.request({
						url: httpPath.filePath+'/api.php/index/member/member_info/',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {member_id:this.user.member_id},
						success: (res) => {
							if(res.data.code=="200"){
								console.log(res.data)
								
								this.info=res.data.result;	
								this.info.keyong=res.data.result.use_capital
								this.info.capital=fmoney(this.info.capital)
								this.info.use_capital=fmoney(this.info.use_capital)
								
								
							}   
						}
					});
					
					
				},/*
			* 删除图片
			* type 1:身份证，驾驶证；2营业执照；3其他附件4合同
			* url图片路径
			* index图片顺序
			*/

			del_pic(type,url,index){
				let _this=this;
				// uni.request({
				// 	url: httpPath.filePath+'/api.php/index/login/del_images',
				// 	method:'POST',
				// 	header:{'content-type':'application/x-www-form-urlencoded'},
				// 	data: {type:type,images:url},
				// 	success: (res) => {
				// 		if(res.data.code=="200"){
				// 			uni.showModal({
				// 				showCancel:false,
				// 				content:"删除成功"
				// 			})
							 _this.hetong1.splice(index,1);
							
							// uni.navigateBack()
						// }else{
						// 	uni.showModal({
						// 		content:res.data.message
						// 	})
						// }
						   
				// 	}
				// });
			},
			uploadimg(type){//上传图片
				let _this=this; 
				 type = type+""
			   // console.log(type)
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album','camera'],
					success: function (res) {	
						console.log( res.tempFilePaths[0])
					   for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: httpPath.filePath+'/api.php/index/login/uplode_images', //仅为示例，非真实的接口地址
								filePath:res.tempFilePaths[i],
								name: 'upload-images',
								formData: {
									type:type
								},
								success: (uploadFileRes) => {
									let data =  eval("("+uploadFileRes.data+")");
										_this.hetong1.push({"url":httpPath.filePath+"/static/upload/image/"+data,"url1":data});	
								}
							});
					   }
					   
					}
				});
			},save(){
				if(this.capital==""||this.capital==null){
					uni.showModal({
						showCancel:false,
						content:"请填写金额"
					})
					return false;
				}else if(parseFloat(this.capital)<=0){
					uni.showModal({
						showCancel:false,
						content:"金额应该大于0"
					})
					return false;
				}else if(parseFloat(this.capital)>this.info.keyong){
					uni.showModal({
						showCancel:false,
						content:"金额应该小于最多可贷金额",
					})
					return false;
				}
				
				console.log(this.info.keyong)
				if(this.hetong1.length==0){
					uni.showModal({
						showCancel:false,
						content:"请上传合同"
					})
					return false;
				}else{
					this.hetong="";
					for(let i=0;i<this.hetong1.length;i++){
						this.hetong+=this.hetong1[i].url1+",";
					}
					var reg=/,$/gi;
					this.hetong=this.hetong.replace(reg,"");
				}
				let url="";
				let data={};
				data={member_id:this.user.member_id,capital:this.capital,hetong:this.hetong}
				if(this.id){
					data.id=this.id
					url="/api.php/index/member/edit_loan"
				}else{
					url="/api.php/index/member/add_loan"
				}
				uni.request({
					url: httpPath.filePath+url,
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: data,
					success: (res) => {
						if(res.data.code=="200"){
							uni.showModal({
								showCancel:false,
								content:"贷款申请已提交，请耐心等待审核"
							})
							uni.navigateBack()
						}else{
							uni.showModal({
								showCancel:false,
								content:res.data.message
							})
						}
						   
					}
				});
			},//将字符串转化成数组
			str_array(str){
				let arry=[];
				if(str.indexOf(",")==-1){
					arry.push(str)
				}else{
					arry=str.split(",")
				}
				return arry;
			},yulan(img){
				uni.previewImage({
					  urls: [img],
					  longPressActions: {
						  // itemList: ['发送给朋友', '保存图片', '收藏'],
						  success: function(data) {
							  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						  },
						  fail: function(err) {
							  console.log(err.errMsg);
						  }
					  }
				});
			},
				
	          
			}
		}
	
</script>

<style>
	@import "../../colorui/main.css";
	.loan_container{width: 100%;background: #FFFFFF;padding: 30rpx 20rpx;margin-bottom: 15rpx;}
	.money-icon{width: 50rpx;line-height: 80rpx;}
	.loan_input{width: 80%;}
	.loan_input input{height: 80rpx;}
	.miaoshu{margin-top:30rpx;}
	.loan_container .border_bottom{padding: 20rpx 0px;}
	.hetong-back{background: #FFFFFF;padding: 10rpx 20rpx 30rpx;}
	.hetong-back .line_title{color: #323232;}
	
</style>
